<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" type="text/css" th:href="${#request.getContextPath()}+'/static/layui/css/layui.css'" media="all"/>
		<link rel="stylesheet" type="text/css" th:href="${#request.getContextPath()}+'/static/css/thesame.css'" media="all"/>
		<link rel="stylesheet" type="text/css" th:href="${#request.getContextPath()}+'/static/foodDelivery/css/statistics.css'" media="all"/>
	</head>

	<body class="layui-layout-body">
		<div class="layui-body">
			<!-- 内容主体区域 -->
			<div class="scroll-box bgWhite box-shadows border-radius4">
				<div class="add-box-scroll">
					<div class="pad20px">
						<article class="border-radius4 box-shadows2 pad20px">
							<h1 class="mb15px fb f20px">全镇供餐费用</h1>
							<nav class="pandect-con">
								<ul>
									<li class="border-radius4 box-shadows2 mr10px haircut-con">
										<div style="background: url(../static/foodDelivery/img/icon_jc.png) no-repeat; background-size: 100% 100%; padding-bottom: 196px;"></div>
										<nav class="haircut-nav haircut-nav-stat">
											<li>
												<p>就餐总费用</p>
												<h1 id="allCost">￥0.0</h1>
											</li>
										</nav>
									</li>
									<li class="ml10px">
										<nav class="pandect-con">
											<ul>
												<li class="border-radius4 box-shadows2 mr10px haircut-con">
													<div style="background: url(../static/foodDelivery/img/icon_btf.png) no-repeat; background-size: 100% 100%; padding-bottom: 196px;"></div>
													<nav class="haircut-nav haircut-nav-stat">
														<li>
															<p>补贴费</p>
															<h1 id="subsidyCost">￥0.0</h1>
														</li>
													</nav>
												</li>
												<li class="border-radius4 box-shadows2 ml10px haircut-con">
													<div style="background: url(../static/foodDelivery/img/icon_jm.png) no-repeat; background-size: 100% 100%; padding-bottom: 196px;"></div>
													<nav class="haircut-nav haircut-nav-stat">
														<li>
															<p>居民支付</p>
															<h1 id="paymentCost">￥0.0</h1>
														</li>
													</nav>
												</li>
											</ul>
										</nav>
									</li>
								</ul>
							</nav>
						</article>					
						<article class="mt20px">
							<nav class="pandect-con">
								<ul>
									<li class="border-radius4 box-shadows2 pad20px mr10px">
										<h1 class="mb15px fb f20px">最新就餐人数</h1>
										<div class="data-width">
											<div id="main1" class="data-main" style="width: 100%; height: 300px;"></div>
										</div>
									</li>
									<li class="border-radius4 box-shadows2 pad20px ml10px">
										<h1 class="mb15px fb f20px">就餐人员年龄分布</h1>
										<div class="data-width">
											<div id="main2" class="data-main" style="width: 100%; height: 300px;"></div>
										</div>
									</li>
								</ul>
							</nav>
						</article>
						
						<article class="mt20px">
							<div class="border-radius4 box-shadows2 pad20px mr10px">
								<div class="overflow">
									<h1 class="mb15px fb f20px left">全镇月度就餐补贴情况</h1>
									<div class="right gray legend legend-hr">
										<span>安亭片</span>
										<span>黄渡片</span>
										<span>方泰片</span> 	
									</div>
								</div>
								<div class="data-width">
									<div id="main3" class="data-main" style="width: 100%; height: 260px;"></div>
									
								</div>
							</div>
						</article>
						<article class="mt20px">
							<div class="border-radius4 box-shadows2 pad20px mr10px">
								<div class="overflow">
									<h1 class="mb15px fb f20px left">全镇月度就餐人员情况</h1>
									<div class="right gray legend">
										<span>安亭片</span>
										<span>黄渡片</span>
										<span>方泰片</span> 	
									</div>
								</div>
								<div class="data-width">
									<div id="main4" class="data-main" style="width: 100%; height: 260px;"></div>
								</div>
							</div>
						</article>
					</div>
				</div>
			</div>
		</div>
		<script th:src="${#request.getContextPath()}+'/static/js/jquery-2.1.3.min.js'"></script>
		<script th:src="${#request.getContextPath()}+'/static/layui/layui.js'"></script>
		<script th:src="${#request.getContextPath()}+'/static/js/echarts.min.js'" charset="utf-8"></script>
		<script>
			$("div.data-main").each(function(){
				let width = $(this).parent("div.data-width").width();
				$(this).css("width",width+"px");
			})
		</script>
		<script th:src="${#request.getContextPath()}+'/static/foodDelivery/js/statistics.js'" charset="utf-8"></script>
		<script>
			layui.use(['layer','jquery'], function() {
				var layer = layui.layer;
				var $ = layui.jquery;
				$.ajax({
					url:"../foodStatistics/costStatistics",
					type:"post",
					dataType:"json",
					success:function (result) {
						if(result.code == 200){
							$("h1#allCost").text("￥"+result.data.cost);
							$("h1#subsidyCost").text("￥"+result.data.subsidy);
							$("h1#paymentCost").text("￥"+result.data.meals);
						}else{
							layer.msg(result.msg);
						}
					}
				})

				getData("main1","1","../foodStatistics/properStatistics");
				getData("main2","2","../foodStatistics/ageStatistics");
				getData("main3","3","../foodStatistics/subsidyStatistics");
				getData("main4","4","../foodStatistics/mealsCountStatistics");
			})
		</script>
	</body>
</html>
